<template>
  <div style="background:white; width:800px;">
    <el-table
      :data="data1"
      :show-header="false"
      border
      class="table1"
      height="160"
      max-height="160"
    >
      <el-table-column label="任务得分项" prop="taskItem" width="140"></el-table-column>
    </el-table>
    <img class="logoimg1" src="../../assets/img/scoreDialogPic1.jpg" />
    <el-button :autofocus="isAutofocus" circle class="scoreStyle">{{score}}</el-button>
    <img class="logoimg2" src="../../assets/img/scoreDialogPic2.png" />
    <el-table
      :data="data2"
      :show-header="false"
      border
      class="table2"
      height="160"
      max-height="160"
    >
      <el-table-column label="技能得分项" prop="skillItem" width="140"></el-table-column>
    </el-table>
    <div>
      <img class="logoimg3" src="../../assets/img/scoreDialogPic3.jpg" />
    </div>
    <div>
      <el-table :data="data3" :show-header="false" border class="table3" max-height="160">
        <el-table-column label="物品得分项" prop="goodsItem" width="140"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
// 导出模块
export default {
  // 模块名字
  name: "paintingListDialog",
  //接收父组件传递的参数
  props: {
    score: 0,
    data1: "",
    data2: "",
    data3: ""
  },
  // 模块数据
  data() {
    //数据
    return {
      isAutofocus: true,
      tableData1: [
        {
          taskItem: "地址"
        }
      ],
      tableData2: [
        {
          skillItem: "速运之星"
        }
      ],
      tableData3: [
        {
          goodsItem: "易坏品"
        }
      ]
    };
  },
  activated() {
    this.isAutofocus = true;
  },

  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {},
  // 创建前状态(里面是操作)
  beforeCreate() {},
  // 创建完毕状态(里面是操作)
  created() {
    this.isAutofocus = true;
  },
  // 挂载前状态(里面是操作)
  mounted() {},
  // 更新前状态(里面是操作)
  beforeUpdate() {},
  // 更新完成状态(里面是操作)
  updated() {}
};
</script>

<style>
.scoreStyle {
  float: left;
  margin-top: 30px;
  margin-right: 60px;
  width: 100px;
  height: 100px;
  font-size: 30px;
}

.table1 {
  width: 142px;
  float: left;
  margin-right: 60px;
  margin-left: 5px;
}

.table2 {
  width: 142px;
  float: left;
  margin-right: 40px;
}

.table3 {
  width: 142px;
  margin-left: 290px;
  margin-top: 10px;
}

.logoimg1 {
  margin-top: 50px;
  margin-right: 60px;
  height: 50px;
  width: 50px;
  float: left;
}

.logoimg2 {
  margin-top: 50px;
  margin-right: 60px;
  height: 60px;
  width: 60px;
  float: left;
}

.logoimg3 {
  margin-top: 10px;
  height: 50px;
  width: 50px;
  margin-left: 330px;
}

.score {
  font-size: 40px;
}
</style>
